<template>
    <div>
        <!-- 用户组管理 -->
        <div class="all-container">
            <!-- 功能栏 -->
            <el-row class="fun-container">
                <el-col :span="24" class="table-fun">
                    <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="refresh">刷新</div>
                    <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="add">添加</div>
                    <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="mod">修改</div>
                    <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="del">删除</div>
                </el-col>
            </el-row>
            <!-- 表格栏 -->
            <avue-crud :data="groupList.data" :option="groupList.option"  @current-row-change="rowChange" :page="groupList.page"  @current-change="userPage"></avue-crud>
            <!-- 添加弹窗 -->
            <div v-show="addWin" class="modModal">
                <!-- 标题栏 -->
                <el-row class="add-title">
                     <div class="closeWin" @click="closeAddWin">X</div>
                    <el-col :span="24">
                        <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">添加</span>
                    </el-col>
                </el-row>
                <!-- 表单栏 -->
                <!-- 第一行 -->
                <el-row class="user-row">
                    <el-col :span="24">
                        <div class="lf choose-title">组别名称</div>
                        <el-input v-model="groupName" placeholder="" size="mini" style="width:150px;" class="lf choose-input user-input"></el-input>
                    </el-col>
                </el-row>
                <!-- 第二行 -->
                <el-row class="user-row">
                    <el-col :span="24">
                        <div class="lf choose-title">备注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        <el-input type="textarea" v-model="remark" style="width:450px;" class="lf choose-input"></el-input>
                    </el-col>
                </el-row>
                <!-- 按钮 -->
                <button class="check-btn rf" @click="closeAddWin">
                <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                <button class="check-btn rf" @click="confirmAdd"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确认</button>
            </div>
            <!-- 修改弹窗 -->
            <div v-show="modWin" class="modModal">
                <!-- 标题栏 -->
                <el-row class="add-title">
                     <div class="closeWin" @click="closeModWin">X</div>
                    <el-col :span="24">
                        <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">修改</span>
                    </el-col>
                </el-row>
                <!-- 表单栏 -->
                <!-- 第一行 -->
                <el-row class="user-row">
                    <el-col :span="24">
                        <div class="lf choose-title">组别名称</div>
                        <el-input v-model="modgroupName" placeholder="" size="mini" style="width:150px;" class="lf choose-input user-input"></el-input>
                    </el-col>
                </el-row>
                <!-- 第二行 -->
                <el-row class="user-row">
                    <el-col :span="24">
                        <div class="lf choose-title">备注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        <el-input type="textarea" v-model="modremark" style="width:450px;" class="lf choose-input"></el-input>
                    </el-col>
                </el-row>
                <!-- 按钮 -->
                <button class="check-btn rf" @click="closeModWin">
                <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                <button class="check-btn rf" @click="confirmMod"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确认</button>
            </div>
        </div>
    </div>
</template>

<script>
import TableData from "../../components/common/tableData";
import qs from "qs";
export default {
  data: function() {
    return {
      groupList: {
        page: {
          pageSizes: [10],
          total: 20,
          currentPage: 1,
          pageSize: 10,
        },
        data:[],
        option:{
          highlightCurrentRow:true,
          page:true,
          align:'center',
          menu:false,
          menuAlign:'center',
          column:[
            {
              label:"组别名称",
              prop:"name"
            },
            {
              label:"备注",
              prop:"remark"
            },
          ]
        }
      },
      addWin: false,
      groupName: "",
      remark: "",
      modgroupName:"",
      modremark:"",
      modWin: false,
      currentRow:""
    };
  },
  methods: {
    userPage(val){
      this.groupList.page.currentPage=val;
      this.getGroupList();
    },
    getGroupList() {
      this
        .postRequest("/sys/user/group/list",{
          rows:10,
          page:this.groupList.page.currentPage
        })
        .then(data => {
          this.groupList.page.total=data.data.totalRow;
          this.groupList.data=data.data.list;
        });
    },
    refresh() {
      this.getGroupList();
    },
    add() {
      this.addWin = true;
    },
    mod() {
      this.modWin = true;
    },
    del() {
      this
        .postRequest("/sys/user/group/del",{
          id:this.currentRow.id
        })
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getGroupList();
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    closeAddWin() {
      this.addWin = false;
    },
    confirmAdd() {
      this
        .getRequest(
          "/sys/user/group/add?sysUserGroup.id=&sysUserGroup.name="+this.groupName+"&sysUserGroup.remark="+this.remark
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getGroupList();
            this.addWin=false;
            this.groupName = "";
            this.remark = "";
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    closeModWin() {
      this.modWin = false;
    },
    confirmMod() {
      this
        .getRequest(
          "/sys/user/group/update?sysUserGroup.id="+this.currentRow.id+"&sysUserGroup.name="+this.modgroupName+"&sysUserGroup.remark="+this.modremark
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getGroupList();
            this.modWin=false;
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    rowChange(val){
      this.currentRow=val;
      this.modgroupName=val.name;
      this.modremark=val.remark;
    }
  },
  computed: {},
  components:{TableData},
  watch: {},
  mounted() {
    console.log("userGroupManage");
    this.getGroupList();
    this.$emit("sendActive", "2-2");
  }
};
</script>
<style scoped src="../../assets/css/allManage/userGroupManage.css">

</style>